/******************************************************************************************
 * Import
 ******************************************************************************************/

// module
import Taro, { Component } from '@tarojs/taro'
import { AtFloatLayout } from "taro-ui"

// project
import { CPage, CContent, CHeader, CFooter, CFloat, CAround, CBetween, CCenter, CRow, CColumn, CWrap, CLine, CHand, CItemX, CItemY, CText, CLabel, CSvg, CImage, CButton } from '../../../library/comp';
import { Base64, Gen, Time, Zip, Session, Storage, Http } from '../../../library/func';
import Icon from '../../../project/style/icon';

/******************************************************************************************
 * Export Class
 ******************************************************************************************/

export default class Index extends Component {

	/*------------------------------------------------------------------------------------
	 * 初始化
	 *-----------------------------------------------------------------------------------*/
	constructor(props) {
		super(props);

		/**
		 * state
		 */
		this.state = {
			isOpened:false
		}
	}

	/*------------------------------------------------------------------------------------
	 * 生命周期
	 *-----------------------------------------------------------------------------------*/
	// didMount
	componentDidMount() {

	}
	
	/*------------------------------------------------------------------------------------
	 * 事件处理
	 *-----------------------------------------------------------------------------------*/
	// onClick
	onClick = (id, e)=> {
		console.log('onClick: ' + id)
    }
    

	/*------------------------------------------------------------------------------------
	 * 自定义方法
	 *-----------------------------------------------------------------------------------*/
	// 查看权益
	openEq = (id,e) => {
		this.setState({
			isOpened:true
		})
	}
	// 关闭弹出
	closeEq = (id,e) => {
		this.setState({
			isOpened:false
		})
	}

	config = {
        navigationBarTitleText: 'VIP权益',
        navigationBarBackgroundColor: '#dd2f3c',
        navigationBarTextStyle: '#fff'
    }

	/*------------------------------------------------------------------------------------
	 * 渲染
	 *-----------------------------------------------------------------------------------*/
	render () {
		return (
			<CPage>
				<CContent bg='#f2f2f2' pt='5' >
					
					{/* 权益列表 */}
					<CColumn bg='#fff' ma='20' px='30' ra='10' h='200'>
						<CRow class='f04'  pt='20'>
							<CSvg w='40' h='40' color='#b49647' mr='10' icon={Icon.buy} />
							<CText color='#b49647' size='32' >VIP自购省钱</CText>
						</CRow>
						<CRow class='f06' pl='20' pt='10'>
							<CText color='#b2b2b2' size='25'>VIP购买商品有高达10%-30%的商品佣金，购物省钱。</CText>
						</CRow>
					</CColumn>

					<CBetween bg='#fff' ma='20' pl='30' ra='10' h='200' oh onClick={this.openEq}  y='top'>
						<CColumn class='f1'  pt='20'>
							<CRow class='f04' >
								<CSvg w='40' h='40' color='#b49647' mr='20' icon={Icon.loudspeaker} />
								<CText color='#b49647' size='32' >推广商品，赚取佣金</CText>
							</CRow>
							<CRow class='f06' pl='20' mt='20' pt='10'>
								<CText color='#b2b2b2' size='25'>官方精选素材，一键推广。</CText>
							</CRow>
						</CColumn>
						<CRow class='f01' bg='#cfb169' h='200' x='center'>
							<CSvg w='40' h='40' color='#fff' icon={Icon.right} />
						</CRow>
					</CBetween>
					<CColumn bg='#fff' h='200' ma='20' pl='30' ra='10'>
						{/*<CColumn class='f1' h='120'>*/}
							<CRow pt='20' class='f04'>
								<CSvg w='40' h='40' color='#b49647' mr='10' icon={Icon.buy} />
								<CText color='#b49647' size='32' >推荐好友成为VIP，赚取奖励</CText>
							</CRow>
							<CRow mt='20' y='top' px='15'>
								<CText color='#b2b2b2'>· </CText>
								<CText color='#b2b2b2' ml='10' >推荐好友成为VIP，填写邀请码注册后，好友购买商品产生的佣金都归您。</CText>
							</CRow>
							<CRow y='top' px='15'>
								<CText color='#b2b2b2'>· </CText>
								<CText color='#b2b2b2' ml='10' >推荐好友成为VIP，赚取奖励</CText>
							</CRow>
						{/*</CColumn>*/}
					</CColumn>
					{/* 弹窗版 */}
					{/*<CBetween bg='#fff' h='120' ma='10 10' pl='15' ra='5' oh >
						<CColumn class='f1' h='120'>
							<CRow pt='10' class='f04' >
								<CSvg w='20' h='20' color='#b49647' mr='10' icon={Icon.buy} />
								<CText color='#b49647' size='16' >推荐好友成为VIP，赚取奖励</CText>
							</CRow>
							<CRow class='f03'>
								<CText color='#b2b2b2' ml='10' >推荐好友成为VIP，赚取奖励推荐好友成为VIP，赚取奖励</CText>
							</CRow>
							<CRow class='f03'>
								<CText color='#b2b2b2' ml='10' >推荐好友成为VIP，赚取奖励</CText>
							</CRow>
						</CColumn>
						<CRow class='f01' bg='#cfb169' h='120' x='center'>
							<CSvg w='15' h='15' color='#fff' icon={Icon.right} />
						</CRow>
					</CBetween>*/}

					<CColumn bg='#fff' h='220' ma='20' pl='30' ra='10' >
						<CRow pt='20' class='f04' >
							<CSvg w='40' h='40' color='#b49647' mr='10' icon={Icon.up} />
							<CText color='#b49647' size='32' >应聘成为公司经理，赚取更高收益</CText>
						</CRow>
						<CRow class='f01' pl='15' y='top' pt='20'>
							<CText>· </CText>
							<CText color='#b2b2b2' ml='10' size='25'>VIP购买商品有高达10%-30%的商品佣金。</CText>
						</CRow>
						<CRow class='f01' pl='15' y='top' py='10'>
							<CText>· </CText>
							<CText color='#b2b2b2' ml='10' size='25'>VIP购买商品有高达10%-30%的商品佣金。</CText>
						</CRow>
						<CRow class='f02' pl='15' y='top'>
							<CText>· </CText>
							<CText color='#b2b2b2' ml='10' size='25'>VIP购买商品有高达10%-30%的商品佣金，购物省钱。</CText>
						</CRow>
					</CColumn>
				</CContent>
				{/* 浮动弹框 */}
				{
					this.isOpened ? (
						<CFloat class='layout'>
							<CColumn>
								<CHand onClick={this.closeEq}>
									<CSvg w='40' h='40' icon={Icon.close} ml='40' my='20' color='#c6a962' />
								</CHand>
								<CImage class='layoutImage' mode='widthFix' src='http://image.mod.hesq.com.cn/rushbuy/assets/20181113/equity1.jpg'></CImage>
							</CColumn>
						</CFloat>
					) : (null)
				}
				
			</CPage>
		)
	}
}


